<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { Editor, RowFlex, ElementType } from '@hufe921/canvas-editor'
import baseCard from '@/components/base-card/index.vue'
import { useRouter, useRoute } from 'vue-router';
import { sseService } from "@/assets/utils/sse";
import type { SSEChatParams } from "@/assets/utils/sse";
import { setUrlParams } from "@/service/sseUrl";
import Papa from "papaparse";
const wordRef = ref<any>(null)

const router = useRouter()
const route = useRoute()
// const qd: any = route.query.data
// const yy: any = route.query.wj
// const str = decodeURIComponent(qd)
// const qdArr = JSON.parse(str)
const queryData = ref(route.query)
// queryData.value = qdArr
const showCanvasEditor = ref<any>(null)

onMounted(() => {
    console.log(wordRef.value);
    showCanvasEditor.value =  new Editor(wordRef.value, {

        header: [
            {
                value: '山东发达面粉集团',
                size: 32,
                color: '#FF0000',
                rowFlex: RowFlex.JUSTIFY
            },
            {
                value: '\n',
                type: ElementType.SEPARATOR
            }
        ],
        main: [],
        footer: [
            {
                value: '\n',
                type: ElementType.SEPARATOR
            },
            {
                value: '集团地址：山东省济南市西城大厦10F',
                size: 18
            }
        ]


    }, {})
    sseServiceOpen()
})
onUnmounted(() => {
    sseService.disconnect()
})

//see 链接
function sseServiceOpen() {
      console.log('dsjkjhkdsjkldsjhkds',queryData.value);
    let yysx:any = queryData.value.yysx
    let wjsx:any= queryData.value.wjsx
    const onopen = () => {
        console.log("建立会议列表sse连接成功")
    }
    // 建立连接
    let sseChatParams: SSEChatParams = {
        onopen,
        url: setUrlParams(yysx, wjsx?wjsx:'readme'),
        onmessage: (event: MessageEvent) => {
            // 收到消息
            console.log('会议列表：', event.data);
            let fst = event.data.replace(/\\n/g, "\n")
            // let strArr = fst.split(';')
            // let strArr1 = strArr[1].split('\n')
            // const ddf = Papa.parse(fst, { header: true, delimiter: ";", newline: "\n" })
            let fst1 = event.data
            let wo = JSON.parse(fst1)
            console.log(wo);
            showCanvasEditor.value.command.executeSetHTML(wo['内容'])

        },
        finallyHandler: () => {
            console.log("finallyHandler操作")
        }
    };
    sseService.connect(sseChatParams)


}


</script>
<template>
    <baseCard  style="height: calc(100% - 20px); overflow: scroll;">

        <div class="word-content">
            <div ref="wordRef" class="canvas-editor"></div>
        </div>

    </baseCard>

</template>
<style src="./index.scss" scoped></style>